// @ts-ignore
import {useState, useEffect} from 'react'
import {Modal, Form, Input, message, Row, Col, Tooltip} from 'antd'
import {InfoCircleOutlined, PayCircleOutlined} from '@ant-design/icons';
import {createPackage, modifyPackage} from '@/services/package'

const CreateModify = ({data, mode, onClose, onOk, visible}) => {
  const [form] = Form.useForm()
  const handleOk = () => {
    form.validateFields().then(values => {
      if (mode === 'create') {
        createPackage({...values}).then(res => {
          if (res.status === 200) {
            message.success(res.message).then()
            onOk()
          } else {
            message.error(res.message).then()
          }
        })
      } else {
        modifyPackage({...values, packageId: data.package_id}).then(res => {
          if (res.status === 200) {
            message.success(res.message).then()
            onOk()
          } else {
            message.error(res.message).then()
          }
        })
      }
    })
  }
  useEffect(() => {
    if (visible) {
      if (mode == 'create') {
        form.resetFields()
      } else {
        form.setFieldsValue({
            package_name: data.package_name,
            package_duration: data.package_duration,
            package_speed_up: data.package_speed_up,
            package_speed_down: data.package_speed_down,
            package_price: data.package_price,
          }
        )
      }
    } else {
      form.resetFields()
    }
  }, [visible, mode])
  return (
    <Modal
      title={mode === 'create' ? '新增套餐' : '修改套餐'}
      maskClosable={false}
      destroyOnClose
      width={'40vw'}
      visible={visible}
      onCancel={onClose}
      onOk={handleOk}
      keyboard={false}
      mask={false}
    >
      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}} autoComplete="off">
        <Row>
          <Col span={12}>
            <Form.Item label="套餐名称" name="package_name" rules={[{required: true, message: '请输入套餐名称'}]}>
              <Input placeholder={'请输入套餐名称'} allowClear/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="套餐周期" name="package_duration" rules={[{required: true, message: '请输入套餐周期'}]}>
              <Input placeholder={'套餐周期'} allowClear suffix={
                <Tooltip title="套餐周期以月为单位">
                  <InfoCircleOutlined style={{color: 'rgba(0,0,0,.45)'}}/>
                </Tooltip>
              }/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="上行带宽" name="package_speed_up" rules={[{required: true, message: '请输上行带宽'}]}>
              <Input placeholder={'上行带宽'} allowClear suffix={'M'} type="number" min={0}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="下行带宽" name="package_speed_down" rules={[{required: true, message: '请输入下行带宽'}]}>
              <Input placeholder={'下行带宽'} allowClear suffix={'M'} type="number" min={0}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="套餐金额" name="package_price" rules={[{required: true, message: '请输入套餐金额'}]}>
              <Input placeholder={'套餐金额'} allowClear suffix={<PayCircleOutlined style={{color: 'green'}}/>}/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default CreateModify;
